<!DOCTYPE html>
  <html dir='rtl'>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <link rel="stylesheet" type="text/css" href="../css/map.css"/>
  </head>
  <body>
    <div id="main">
    <div id="map"></div>
    <div id="footer">
      <div class="foot">
        <div class="mui-content" id="muiContent">

      </div>
      <div class="mui-col-xs-6">
         <button type="button" id="search" class="mui-btn">Search</button>
     </div>
     <div class="mui-col-xs-6">
        <button type="button" id="showList" class="mui-btn">Show List</button>
    </div>
    </div>
  </div>
  </body>
  <script id="template" type="text/x-dot-template">
  <div class="mui-row">
    <div class="mui-col-xs-6">
       <select id="select1" onchange="select1('select1')"  style="width: 100%;">
         <option value="">Organization</option>
           {{ for (var key in it) { }}
             <option value={{=it[key].id}}>{{=it[key].Name}}</option>
           {{ } }}
       </select>
   </div>
  <div class="mui-col-xs-6">
     <select onchange="select1('select2')" id="select2" style="width: 100%;">
       <option value="">Full-degree All</option>
       <option value="1">0-20%</option>
       <option value="2">21%-40%</option>
       <option value="3">41-60%</option>
       <option value="4">61-80%</option>
       <option value="5">81-100%</option>
     </select>
 </div>
 <div class="mui-col-xs-6">
    <select  onchange="select1('select3')" id="select3" style="width: 100%;">
      <option value="">Cleaned Status all</option>
      <option value="1">Cleaned</option>
      <option value="0">Not Cleaned</option>
    </select>
</div>
 <div class="mui-col-xs-6">
    <select onchange="select1('select4')" id="select4" style="width: 100%;">
      <option value="">Equipment Status All</option>
      <option value="1">Normal</option>
      <option value="0">Failure</option>
    </select>
  </div>
 </div>
  </script>

  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/doT.min.js"></script>
  <script type="text/javascript" src="../script/gps.js"></script>
  <script type="text/javascript" src="../script/ajax.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDF8b23KBR4I5abL25PcVB930nkq2XeMAs&language=ar&region=EG"></script>
  <script type="text/javascript" src="../script/common.js"></script>
  <script type="text/javascript">
      apiready = function() {
        let showList = $api.byId('showList');
        // let query = $api.getStorage('query');
        var template = $api.byId('template');
        var search = $api.byId('search');
        var interText = doT.template(template.innerHTML);
        let query = $api.getStorage('query');
        getId(interText)
        getData(query.Org);
        initMap();
        search.addEventListener('click', function() {
          // getSelect();
          var values1 = select1('select1');
          var values2 = select1('select2');
          var values3 = select1('select3');
          var values4 = select1('select4');
          // let query = $api.getStorage('query');
          let org = '';
          if (values1 === '') {
            // console.log('111');
            org = query.Org;
            getData(org, values2, values3, values4);
          } else {
            org = values1;
            getData(org, values2, values3, values4);
          }
        });
        showList.addEventListener('click', function() {
          let org = '';
          var values1 = select1('select1');
          var values2 = select1('select2');
          var values3 = select1('select3');
          var values4 = select1('select4');
          if (values1 === '') {
            org = query.Org;
          } else {
            org = values1;
          }
          api.openWin({
              name: 'showlist',
              url: './showlist.html',
              bounces: false,
              slidBackEnabled: false,
              pageParam: {
                org: org,
                full: values2,
                clean: values3,
                equiment: values4
              }
          });
        });
        function getData (org, val2, val3, val4) {
          // let org = '';
          api.ajax({
            url: 'http://223.255.10.50:8029/dsp-ShateApp-ui/GarbageBin/app/findInfo.action',
            type: 'get',
            data: {
              values: {
                Organization: org,
                Full_degreeStatus: val2,
                CleanedStatus: val3,
                EquipmentStatus: val4
              }
            },
            }, function(ret, err) {
              if (ret) {
                initMap(ret.data.rows);
              } else {
                  api.alert('Server exception');
                // console.log(JSON.stringify(err));
              }

          });
        }
        function initMap(data) {
          let maps = $api.getStorage('maps');
          let wgs = wgs84togcj02(maps.Y, maps.X);
          let gcj = gcj02tobd09(wgs[0], wgs[1]);
          let bd0 = bd09togcj02(gcj[0], gcj[1]);
          var map = new google.maps.Map(document.getElementById('map'), {
            zoom: Number(maps.zoom),
            center: new google.maps.LatLng(bd0[0],  bd0[1])
          });
          if (typeof data === undefined) return false;
          var marker, position, icons;
          for (var key in data) {
            if (data.length === 0) {
              return false;
              // icons = '../image/baibi.png';
            }
            if (data[key].CleanedStatus === 'Not Cleaned') {
              if (data[key]['Full-degree'] === '1') {
                icons = '../image/laji/noClearMandu61.png';
              }
              if (data[key]['Full-degree'] === '2') {
                icons = '../image/laji/noClearMandu62.png';
              }
              if (data[key]['Full-degree'] === '3') {
                icons = '../image/laji/noClearMandu63.png';
              }
              if (data[key]['Full-degree'] === '4') {
                icons = '../image/laji/noClearMandu64.png';
              }
              if (data[key]['Full-degree'] === '5') {
                icons = '../image/laji/noClearMandu65.png';
              }
            } else {
              if (data[key]['Full-degree'] === '1') {
                icons = '../image/laji/clearMandu61.png';
              }
              if (data[key]['Full-degree'] === '2') {
                icons = '../image/laji/clearMandu62.png';
              }
              if (data[key]['Full-degree'] === '3') {
                icons = '../image/laji/clearMandu63.png';
              }
              if (data[key]['Full-degree'] === '4') {
                icons = '../image/laji/clearMandu64.png';
              }
              if (data[key]['Full-degree'] === '5') {
                icons = '../image/laji/clearMandu65.png';
              }
            }
            if (data[key].LastOnlineTime == null) {
              data[key].LastOnlineTime = 'No Data'
            }
            var contentString = '<div id="content">'+
              '<div id="siteNotice">Name：'+data[key].name +'</div>'+
              '<div id="siteNotice">Dustbintype：'+data[key].Dustbintype +'</div>'+
              '<div id="siteNotice">Organization：'+data[key].Organization +'</div>'+
              '<div id="siteNotice">LastOnlineTime：'+data[key].LastOnlineTime +'</div>'+
              '<div id="siteNotice">Full-degree：'+data[key]['Full-degree'] +'</div>'+
              '<div id="siteNotice">CleanedStatus：'+data[key].CleanedStatus +'</div>'+
              '<div id="siteNotice">EquipmentStatus：'+data[key].EquipmentStatus +'</div>'+
              '<div id="siteNotice">CleanedStatus：'+data[key].CleanedStatus +'</div>'+
              '<div id="siteNotice">Position：'+data[key].Position +'</div>'+
              '</div>';
            let wgs = wgs84togcj02(data[key].Y, data[key].X);
            let gcj = gcj02tobd09(wgs[0], wgs[1]);
            let bd0 = bd09togcj02(gcj[0], gcj[1]);
            position = new google.maps.LatLng(bd0[0], bd0[1]);
            var infowindow = new google.maps.InfoWindow({
              content: contentString,
              // maxWidth: 200,
              position: position
            });
            var marker = new google.maps.Marker({
               position:  position,
               map: map,
               icon: icons
            });
            headerClick(infowindow, marker);
          }
          function headerClick (infowindow, marker) {
            // infowindow.close(infowindow, marker);
            marker.addListener('click', function(e) {
              infowindow.open(infowindow, marker);
            });
          }
        }
      };
      // }
</script>
  </html>
